<template>
  <el-dialog v-model="messageVisible" title="修改说说内容">
    <el-form :model="props.messageEditForm" :rules="rules" ref="messageRef">
      <el-form-item label="说说内容">
        <el-input v-model="props.messageEditForm.content" autocomplete="off" />
      </el-form-item>
    </el-form>
    <Emoji @handle-emotion="handleEmotion" />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="messageVisibleController(false)">取消</el-button>
        <el-button type="primary" @click="onSubmitEdit(messageRef)">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" name="messageDialog" setup>
  import { reactive, ref } from 'vue'
  import type { FormRules, FormInstance } from 'element-plus'
  import { updateMessageContentRequest } from '@/network/api/message-api'
  import Emoji from '@/components/emotion/Emoji.vue'
  import notification from '@/utils/notification'
  const messageVisible = ref(false)
  const rules = reactive<FormRules>({
    content: [{ required: true, message: '说说内容不能为空~', trigger: 'blur' }],
  })
  const messageRef = ref<FormInstance>()
  interface ImessageEditForm {
    message_id: number
    content: string
  }
  const props = defineProps<{
    messageEditForm: ImessageEditForm
  }>()

  const handleEmotion = (value: string) => {
    props.messageEditForm.content += value
  }

  const onSubmitEdit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(async valid => {
      if (valid) {
        const result = await updateMessageContentRequest(props.messageEditForm.message_id, props.messageEditForm.content)
        notification.success(result.msg)
        messageVisibleController(false)
      } else {
        return
      }
    })
  }
  const messageVisibleController = (isClose: boolean) => {
    if (isClose) {
      messageVisible.value = true
    } else {
      messageVisible.value = false
    }
  }
  defineExpose({ messageVisibleController })
</script>
